<template>
    <div v-if="proxy.isAuth(['ROOT', 'ORDER:SELECT'])">
        <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="form">
            <el-form-item prop="code">
                <el-input v-model="dataForm.code" placeholder="套餐编号" maxlength="20" class="input"
                    clearable="clearable" />
            </el-form-item>
            <el-form-item prop="keyword">
                <el-input v-model="dataForm.keyword" placeholder="套餐名称" class="keyword" maxlength="50"
                    clearable="clearable" />
            </el-form-item>
            <el-form-item prop="tel">
                <el-input v-model="dataForm.tel" placeholder="电话号码" maxlength="11" class="input"
                    clearable="clearable" />
            </el-form-item>
            <el-form-item class="range">
                <el-date-picker v-model="dataForm.dateRange" type="daterange" range-separator="~"
                    start-placeholder="起始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item>
                <el-select v-model="dataForm.status" class="input" placeholder="订单状态" clearable="clearable">
                    <el-option label="未付款" value="1" />
                    <el-option label="已关闭" value="2" />
                    <el-option label="已付款" value="3" />
                    <el-option label="已退款" value="4" />
                    <el-option label="已预约" value="5" />
                    <el-option label="已结束" value="6" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchHandle()">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-if="proxy.isAuth(['ROOT', 'ORDER:UPDATE'])" :icon="Refresh"
                    @click="checkPaymentResultHandle()">同步付款结果</el-button>
            </el-form-item>
        </el-form>
    </div>

    <el-table :data="data.dataList" :header-cell-style="{ 'background': '#f5f7fa' }" border v-loading="data.loading"
        @selection-change="selectionChangeHandle" @expand-change="expand" :row-key="data.getRowKeys"
        :expand-row-keys="data.expands">
        <el-table-column type="expand">
            <template #default="scope">
                <div class="content-container">
                    <div class="left-panel">
                        <el-card class="box-card" shadow="never">
                            <div class="info">
                                <div class="left">
                                    <el-avatar :size="57" shape="square" :src="scope.row.photo">
                                        <el-icon size="35">
                                            <UserFilled />
                                        </el-icon>
                                    </el-avatar>
                                </div>
                                <div class="right">
                                    <h4 class="customer-name">{{ scope.row.name }}</h4>
                                    <p class="customer-desc">
                                        <el-icon class="icon">
                                            <User />
                                        </el-icon>
                                        <span class="value">{{ scope.row.sex }}</span>
                                        <el-icon class="icon">
                                            <Phone />
                                        </el-icon>
                                        <span class="value">{{ scope.row.tel }}</span>
                                        <el-icon class="icon">
                                            <Calendar />
                                        </el-icon>
                                        <span class="value">{{ scope.row.registerTime }}</span>
                                    </p>
                                </div>
                            </div>
                            <el-divider />
                            <el-row :gutter="16">
                                <el-col :span="6">
                                    <div class="statistic-card">
                                        <el-statistic :value="scope.row.number - scope.row.num" suffix="个">
                                            <template #title>
                                                <div class="title">可预约体检</div>
                                            </template>
                                        </el-statistic>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="statistic-card">
                                        <el-statistic :value="scope.row.num" suffix="个">
                                            <template #title>
                                                <div class="title">已预约体检</div>
                                            </template>
                                        </el-statistic>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="statistic-card">
                                        <el-statistic :value="scope.row.number" suffix="个">
                                            <template #title>
                                                <div class="title">总计数量</div>
                                            </template>
                                        </el-statistic>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                        <el-descriptions :column="1" class="order-code" border>
                            <el-descriptions-item label="订单编号：" label-align="center">
                                {{ scope.row.outTradeNo }}
                            </el-descriptions-item>
                            <el-descriptions-item label="付款编号：" label-align="center">
                                {{ scope.row.transactionId == null ? "无" : scope.row.transactionId }}
                            </el-descriptions-item>
                            <el-descriptions-item label="退款编号：" label-align="center">
                                {{ scope.row.outRefundNo == null ? "无" : scope.row.outRefundNo }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div class="right-panel">
                        <el-table :data="data.appointment" :header-cell-style="{ 'background': '#f5f7fa' }" height="350"
                            border>
                            <el-table-column label="序号" type="index" label-align="center" align="center" min-width="90">
                                <template #default="scope">
                                    <span>{{ scope.$index + 1 }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="体检人" label-align="center" align="center"
                                min-width="180" />
                            <el-table-column prop="sex" label="性别" label-align="center" align="center"
                                min-width="120" />
                            <el-table-column prop="age" label="年龄" label-align="center" align="center"
                                min-width="120" />
                            <el-table-column prop="tel" label="电话" label-align="center" align="center"
                                min-width="180" />
                            <el-table-column prop="date" label="体检日" label-align="center" align="center"
                                min-width="180" />
                            <el-table-column prop="status" label="状态" label-align="center" align="center"
                                min-width="130" />
                        </el-table>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column type="selection" header-align="center" align="center" width="50" :selectable="selectable" />
        <el-table-column type="index" header-align="center" align="center" width="100" label="序号">
            <template #default="scope">
                <span>{{ (data.pageIndex - 1) * data.pageSize + scope.$index + 1 }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="goodsTitle" header-align="left" align="left" min-width="220" label="套餐名称" />
        <el-table-column header-align="center" align="center" min-width="80" label="价格">
            <template #default="scope">
                <span>￥{{ scope.row.goodsPrice }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="number" header-align="center" align="center" min-width="100" label="数量" />
        <el-table-column header-align="center" align="center" min-width="100" label="总计">
            <template #default="scope">
                <span>￥{{ scope.row.amount }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="status" header-align="center" align="center" min-width="100" label="状态" />
        <el-table-column prop="createTime" header-align="center" align="center" min-width="100" label="下单时间" />
        <el-table-column prop="refundTime" header-align="center" align="center" min-width="100" label="退款时间" />
        <el-table-column header-align="center" align="center" width="200" label="操作">
            <template #default="scope">
                <el-button type="text" v-if="proxy.isAuth(['ROOT', 'ORDER:SELECT'])"
                    @click="viewHandle(scope.row.snapshotId)">
                    预览
                </el-button>
                <el-button type="text" v-if="proxy.isAuth(['ROOT', 'ORDER:DELETE'])"
                    :disabled="scope.row.status != '已关闭'" @click="deleteHandle(scope.row.id)">
                    删除
                </el-button>
                <el-button type="text" v-if="proxy.isAuth(['ROOT', 'ORDER:UPDATE'])"
                    :disabled="scope.row.status != '已付款'" @click="updateHandle(scope.row.id)">
                    线下退款
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="data.pageIndex"
        :page-sizes="[10, 20, 50]" :page-size="data.pageSize" :total="data.totalCount"
        layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>


</template>

<script lang="ts" setup>
import { reactive, getCurrentInstance, ref } from 'vue';
import router from '../../router/index';
import { Refresh } from '@element-plus/icons-vue'

interface ApiResponse {
    result: any;
    rows?: number;
    page?: {
        list: any[];
        totalCount: number;
        [key: string]: any;
    };
    [key: string]: any;
}
interface Appointment {
    id: number;
    name: string;
    sex: string;
    age: number;
    tel: string;
    date: string;
    status: string;
    // Add any other properties that exist on your appointment objects
}

let statusEnum: Record<string, string> = {
    "1": "未付款",
    "2": "已关闭",
    "3": "已付款",
    "4": "已退款",
    "5": "已预约",
    "6": "已结束"
};
const { proxy } = getCurrentInstance() as any;

const dataForm = reactive({
    code: null,
    keyword: null,
    tel: null,
    dateRange: [],
    status: null
});

const dataRule = reactive({
    code: [
        { min: 6, message: '编号不能少于6个字符' },
        { pattern: '^[a-zA-Z0-9]{6,20}$', message: '编号格式错误' }
    ],
    keword: [
        { pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,50}$', message: '名称格式错误' }
    ],
    tel: [
        { pattern: '^1[1-9]\\d{9}$', message: '电话号码格式错误' }
    ]
});


const data = reactive({
    dataList: [] as any[],
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    loading: false,
    selections: [] as any[],
    expands: [] as any[],
    getRowKeys(row: any) {
        return row.id;
    },
    appointment: [] as Appointment[]
});

//加载数据
function loadDataList() {
    data.loading = true;
    let range = dataForm.dateRange
    let json = {
        page: data.pageIndex,
        length: data.pageSize,
        keyword: dataForm.keyword,
        code: dataForm.code,
        tel: dataForm.tel,
        status: dataForm.status,
        startDate: (range != null && range.length == 2) ? range[0] : null,
        endDate: (range != null && range.length == 2) ? range[1] : null,
    };
    proxy.$http('/mis/order/searchByPage', 'POST', json, true, function (resp: ApiResponse) {
        let page = resp.page;
        let list = page?.list;
        for (let one of list || []) {
            one.status = statusEnum[one.status + ""]
        }
        data.dataList = list || [];
        data.totalCount = page?.totalCount || 0;
        data.loading = false;
    });
}
//调用加载数据
loadDataList()


//查询处理
function searchHandle() {
    proxy.$refs['form'].validate((valid: boolean) => {
        if (valid) {
            proxy.$refs['form'].clearValidate();
            if (dataForm.keyword == '') {
                dataForm.keyword = null;
            }
            if (dataForm.code == '') {
                dataForm.code = null;
            }
            if (dataForm.tel == '') {
                dataForm.tel = null;
            }
            if (dataForm.status == '') {
                dataForm.status = null;
            }
            if (data.pageIndex != 1) {
                data.pageIndex = 1;
            }
            loadDataList();
        } else {
            return false;
        }
    });
}

//分页
function sizeChangeHandle(val: number) {
    data.pageSize = val;
    data.pageIndex = 1;
    loadDataList();
}
function currentChangeHandle(val: number) {
    data.pageIndex = val;
    loadDataList();
}

//定义预约状态
type AppointmentStatus = "1" | "2" | "3" | "4";

//展开折叠面板
function expand(row: any, expandedRows: any) {
    if (expandedRows.length > 0) {
        //先把所有展开的面板收起
        data.expands = [];
        if (row) {
            data.appointment = []
            let json = {
                orderId: row.id
            }
            proxy.$http("/mis/appointment/searchByOrderId", "POST", json, true, function (resp: ApiResponse) {
                let result = resp.result
                let statusEnum = {
                    "1": "未签到",
                    "2": "已签到",
                    "3": "已结束",
                    "4": "已关闭"
                }
                for (let one of result) {
                    //one.status = statusEnum[one.status + ""]
                    const status = String(one.status) as AppointmentStatus;
                    one.status = statusEnum[status] || one.status;
                }
                data.appointment = result

            })
            //展开订单记录的折叠面板
            data.expands.push(row.id);
        } else {
            data.expands = [];
        }
    }
}

//查看快照
function viewHandle(snapshotId: string) {
    const route = router.resolve({
        name: 'FrontGoodsSnapshot',
        params: { id: snapshotId, mode: "mis" }
    });
    window.open(route.href, '_blank');
}

function selectable(row: any, index: number) {
    if (["未付款", "已关闭"].includes(row.status)) {
        return true;
    }
    return false;
}

function selectionChangeHandle(val: any) {
    data.selections = val;
}

//同步付款结果
function checkPaymentResultHandle() {
    //提取选中订单记录的订单流水号
    let outTradeNoArray = data.selections.map(item => {
        return item.outTradeNo;
    });
    if (outTradeNoArray == null || outTradeNoArray.length == 0) {
        proxy.$message({
            message: '没有选中记录',
            type: 'error',
            duration: 1200
        });
        return;
    }
    let json = {
        outTradeNoArray: outTradeNoArray
    }
    proxy.$http('/mis/order/checkPaymentResult', 'POST', json, true, function (resp: ApiResponse) {
        if (resp.rows != null && resp.rows > 0) {
            proxy.$message({
                message: `成功同步了${resp.rows}条付款记录`,
                type: 'success',
                duration: 1200,
                onClose: () => {
                    loadDataList();
                }
            });
        } else {
            proxy.$message({
                message: '没有查询到这些订单付款成功',
                type: 'warning',
                duration: 1200
            });
        }
    });
}

//删除订单
function deleteHandle(id: number) {
    proxy.$confirm('确定要删除这条订单记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        let json = { "id": id }
        proxy.$http('/mis/order/deleteById', 'POST', json, true, function (resp: ApiResponse) {
            if (resp.rows != null && resp.rows > 0) {
                proxy.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1200,
                    onClose: () => {
                        loadDataList();
                    }
                });
            } else {
                proxy.$message({
                    message: '未能删除记录',
                    type: 'warning',
                    duration: 1200
                });
            }
        });
    });
}

//线下退款
function updateHandle(id: number) {
    proxy.$confirm('确定该订单已经线下退款成功？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        let json = { "id": id }
        proxy.$http('/mis/order/updateRefundStatusById', 'POST', json, true, function (resp: ApiResponse) {
            if (resp.rows != null && resp.rows > 0) {
                proxy.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1200,
                    onClose: () => {
                        loadDataList();
                    }
                });
            } else {
                proxy.$message({
                    message: '未能更新订单状态',
                    type: 'warning',
                    duration: 1200
                });
            }
        });
    });
}


</script>

<style lang="less" scoped>
@import url('order.less');
</style>
